<template>
  <div>
    <el-button type="primary"
               @click="addAdmin">添加管理员</el-button>
    <el-row>
      <el-col :span="8"
              v-for="(item ,index ) in adminList"
              :key="index">

        <el-card class="box-card"
                 style="width: 400px">
          <div slot="header"
               class="clearfix">
            <!-- <span>{{item.adminUsername}}</span> -->
            <span>系统管理员</span>
          </div>
          <div>
            <div style="display: flex;justify-content: center">
              <img :src="item.adminFace"
                   style="height: 100px;width: 100px;border-radius: 50px"
                   alt="">
              </el-upload>
            </div>
            <div>管理员名：
              <el-tag>{{item.adminUsername}}</el-tag>
            </div>
            <div>手机号码：
              <el-tag>{{item.adminPhone}}</el-tag>
            </div>
            <div>账号:
              <el-tag>{{item.adminAccount}}</el-tag>
            </div>
            <div>标签
              <el-tag>系统管理员</el-tag>
            </div>
            <div>状态
              <el-tag v-if="item.adminStatus == 1 ">正常</el-tag>
              <el-tag v-else-if="item.adminStatus == 0">禁用</el-tag>
            </div>
            <div style="display: flex;justify-content: space-around;margin-top: 10px">
              <el-button v-if="item.adminStatus == 1"
                         type="danger"
                         icon="el-icon-delete"
                         @click="disableAdmin(item.id)"
                         circle> </el-button>
              <el-button v-if="item.adminStatus != 1 "
                         type="primary"
                         icon="el-icon-check"
                         circle
                         @click="enableAdmin(item.id)">
              </el-button>
            </div>
          </div>
        </el-card>

      </el-col>

    </el-row>

    <el-dialog title="添加管理员"
               :visible.sync="addAdminVisible">
      <el-form ref="form"
               :model="form"
               :rules="rules"
               label-width="80px">
        <el-form-item label="账号"
                      prop="adminAccount">
          <el-input v-model="form.adminAccount"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      prop="adminPassword">
          <el-input v-model="form.adminPassword"> </el-input>
        </el-form-item>

        <el-form-item label="管理员名:"
                      prop="adminUsername">
          <el-input v-model="form.adminUsername"> </el-input>
        </el-form-item>

        <el-form-item label="联系方式:"
                      prop="adminPhone">
          <el-input v-model="form.adminPhone"> </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary"
                     @click="onSubmit('form')">提交</el-button>
          <el-button type="primary"
                     @click="closeDialog('form')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      adminList: [],
      form: {
        adminAccount: '',
        adminPassword: '',
        adminPhone: '',
        adminUsername: '',
      },
      rules: {
        adminAccount: [{ required: true, message: "账号不能为空", trigger: "blur" }],
        adminPassword: [{ required: true, message: "密码不能为空", trigger: "blur" }],
        adminUsername: [{ required: true, message: "管理员名不能为空", trigger: "blur" }],
        adminPhone: [{ required: true, message: "联系方式不能为空", trigger: "blur" }],

      },
      addAdminVisible: false
    }
  },
  created() { },
  methods: {
    //初始化管理员列表
    getAdminList() {
      this.getRequest('admin/api/getAdminList').then(res => {
        console.log(res)
        if (res.code === 200 && res.msg == "success") {
          this.adminList = res.data;
        } else {
          this.$message.error(res.msg)
        }

      })
    },
    showUpdateAdminInfoDialog(id) {
      console.log(id)
    },
    addAdmin() {
      this.addAdminVisible = true;
    },
    onSubmit(formName) {


      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.postRequest('admin/api/addAdmin', this.form).then(res => {
            if (res.code === 200 && res.msg == "success") {
              this.$message.success('添加成功');
              this.addAdminVisible = false;
              this.getAdminList();
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false;
        }
      })
    },
    closeDialog(formName) {
      this.$refs[formName].resetFields();
      this.addAdminVisible = false;
    },
		// 禁用账户
    disableAdmin(id) {
			this.$confirm('确认禁用该用户吗', '提示', {
				confirmButtonText:"确定" , 
			  cancelButtonText: "取消",
					type: "warning",
					showCancelButton: true
			}).then(() => {
				this.putRequest('admin/api/disableAdmin/' + id).then(res => {
					if (res.code === 200 && res.msg === 'success') {
						this.$message({
							type: 'success',
							message: '禁用成功'
						})
						this.getAdminList();
					} else {
						this.$message({
							type: 'error',
							message: '出错了'
						})
					}
				
			})
    }).catch(() => {
			this.$message({
				type: 'info',
				message: '已取消'
			})
		});
		},
		// 启用账户
    enableAdmin(id) {
      this.$confirm('确认启用该用户吗', '提示', {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
				showCancelButton: true
			}).then(() => {
				this.putRequest('admin/api/enableAdmin/' + id).then(res => {
					if (res.code === 200 && res.msg === 'success') {
						this.$message({
							type: 'success',
							message: '启用成功'
						})
						this.getAdminList();
					} else {
						this.$message({
							type: 'error',
							message: '出错了'
						})
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消'
				})
			});
    }


  },
  mounted() {
    this.getAdminList();
  }
}
</script>

<style scoped>
</style>